﻿@{
    
    Layout = null;
}
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="~/img/animated_favicon1.gif">
<link href="~/UILibs/easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="~/UILibs/easyui/themes/icon.css" rel="stylesheet" />
<link href="~/Css/css.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.jqprint-0.3.js"></script>
<script src="~/UILibs/easyui/jquery.easyui.min.js"></script>

<script src="~/UILibs/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/echarts.common.min.js"></script>


<script type="text/javascript">
    function searchData() {

        var start = $("#txtDate1").datebox('getValue');
        var end = $("#txtDate2").datebox('getValue');
        //alert(start);
        if (start == null || end == null || end == "" || end == "") {

            alert("开始日期和结束时间不能为空");
            txtDate1.focus();
            return false;
        }
        else if (txtDate1.value > txtDate2.value) {

            alert("开始日期不能大于截至日期！");
            $("#txtDate1").datebox('setValue', "");//根据ID清空输入的时间
            $("#txtDate2").datebox('setValue', "");//根据ID清空
            txtDate1.focus();
            txtDate2.focus();
            return false;
        }
        else {
            $.post("/PerCustmPriceChart/PerCustomerPrice?date1=" + $("#txtDate1").val() + '&date2=' + $('#txtDate2').val(),
            function (result) {     
                var shopName = [];
                var PerPrice = [];
                var CustomerSum = [];
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $.each(result, function (index, item) {
                    //挨个取出类别并填入类别数 shopName PerPrice
                    shopName.push(item.shopName);
                    PerPrice.push(item.PerPrice);
                    CustomerSum.push(item.CustomerSum);
                });
                option = {
                    backgroundColor: '#eee',
                    legend: {
                        data: ['客单量', '客单价',],
                        align: 'right',
                        right: 10
                    },
                    title: {
                        text: '客单价/客单量分析',
                        subtext: '按日期统计'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    //xAxis: [
                    //    {
                    //        type: 'category',
                    //        //这是一个日期  用数组放    
                    //        data: shopName,// ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    //        axisTick: {
                    //            alignWithLabel: true
                    //        }
                    //    }
                    //],
                    yAxis: [
                        {
                            type: 'value'  ///Y 轴上的数据    自动的 不用设置  
                        }
                    ],
                    series: [
                               {
                                   name: '客单量',
                                   type: 'bar',
                                   stack: 'one',  //分组归类  决定 谁跟谁 显示在一条线上
                                   barWidth: '20%',
                                   itemStyle: {
                                       normal: { color: '#3398DB' },                                  
                                   },
                                   data: CustomerSum
                               },
                               {
                                   name: '客单价',
                                   barWidth: '20%',
                                   type: 'bar',
                                   stack: 'two',
                                   itemStyle: {
                                       normal: { color: 'lightBlue' },
                                       
                                   },
                                   data: PerPrice
                               },
                    ]};
                var myChart = echarts.init(document.getElementById('main'));
                myChart.setOption(option);

            })
            $("#txtDate1").datebox('setValue', "");//根据ID清空输入的时间
            $("#txtDate2").datebox('setValue', "");//根据ID清空
        }
    }
</script>



<body class="" style="width: 100%; height: 100%">

    <div id="tool" style="padding-left: 100px; margin-top: 20px">
        <p><span style="font-size: larger; color: brown; margin-top: initial;">请选择起始日期进行统计:</span></p>
        <input id="txtDate1" type="text" class="easyui-datebox" />
        ---
                <input id="txtDate2" type="text" class="easyui-datebox" onchange="searchData()" />
        &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp 
                  <a class="easyui-linkbutton" iconcls="icon-search" onclick="searchData()">统计</a>
        <span style="font-size: larger; color: red">&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp  </span>
    </div>
    <div data-options="region:'center'">
        <div data-options="region:'center'" style="width: 700px; height: 350px; margin-left: 100px; margin-top: 20px" id="main">
        </div>


    </div>
    <script type="text/javascript">
        $.post('/PerCustmPriceChart/PerCustomerPrice',
          function (result) {
              var shopName = [];
              var PerPrice = [];
              var CustomerSum = [];
              //请求成功时执行该函数内容，result即为服务器返回的json对象
              $.each(result, function (index, item) {
                  //挨个取出类别并填入类别数 shopName PerPrice
                  shopName.push(item.shopName);
                  PerPrice.push(item.PerPrice);
                  CustomerSum.push(item.CustomerSum);
              });
              option = {
                  backgroundColor: '#eee',
                  legend: {
                      data: ['客单量', '客单价', ],
                      align: 'right',
                      right: 10
                  },
                  title: {
                      text: '客单价/客单量分析',
                      subtext: '按日期统计'
                  },
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                      }
                  },
                  grid: {
                      left: '3%',
                      right: '4%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: [
                      {
                          type: 'category',
                          //这是一个日期  用数组放    
                          data: shopName,// ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                          axisTick: {
                              alignWithLabel: true
                          } 
                      }
                  ],
                  yAxis: [
                      {
                          type: 'value'  ///Y 轴上的数据    自动的 不用设置  
                      }
                  ],
                  series: [
                             {
                                 name: '客单量',
                                 type: 'bar',
                                 stack: 'one',  //分组归类  决定 谁跟谁 显示在一条线上
                                 barWidth: '20%',
                                 itemStyle: {
                                     normal: { color: '#3398DB' },
                                 },
                                 data: CustomerSum
                             },
                             {
                                 name: '客单价',
                                 barWidth: '20%',
                                 type: 'bar',
                                 stack: 'two',
                                 itemStyle: {
                                     normal: { color: 'lightBlue' },

                                 },
                                 data: PerPrice
                             },
                  ]
              };
              var myChart = echarts.init(document.getElementById('main'));
              myChart.setOption(option);

          })

    </script>

</body>

